<template>
    <div>
        
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
       <!--  <el-dialog :visible.sync="visible" title="Hello world">
        <p>欢迎使用 Element</p>
        </el-dialog> -->

        <el-button @click="msg1" type="primary" icon="el-icon-edit" plain  >按钮</el-button>
        <div>
            <h1>单选</h1>
            <el-radio v-model="radio" label="1">单选</el-radio>   
            <el-radio v-model="radio" label="2">备选项</el-radio>
            <el-radio-group v-model="radio3">
            <el-radio-button  label="3">备选项1</el-radio-button>
            <el-radio-button  label="4">备选项2</el-radio-button>
            </el-radio-group>
        </div>
        <div>
            <h1>多选</h1>
            <el-checkbox v-model="ch">水果</el-checkbox> 
            <el-input v-model="ins"></el-input>    
        </div>
        <div>
            <el-input-number :min="1" :max="10" v-model="number" @change="num"></el-input-number>
        </div>
        <div>
            <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
        </div>
        <div class="block">
            <span class="demonstration">默认</span>
            <el-slider v-model="value1"></el-slider>
        </div>

    </div>
    

    
   
</template>
<script>
    export default {
        data () {
            return {

                visible: true,
                radio:'',
                radio3:'',
                ch:'',
                ins:'',
                number:'1',
                value2:true,
                value1:30
            }
        },
        methods:{
            msg1:function(){
                console.log(4,this.$store.state.count)
            },
            num:function(value){
                console.log(5,value)
            }
        }
    }
    
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>